{% extends 'layouts/blank.html' %}

{% block content %}
<div class="flex flex-col md:flex-row md:justify-end">
    <div class="w-full! md:w-72! lg:w-72! px-4 pt-2">
      {% include 'includes/settings_sidebar.html' with page='danger_settings' %}
    </div>
    <div class="flex w-full justify-start items-center py-2 px-3 md:px-8">
        <div class="rounded-md w-full min-[1200px]:w-3xl! md:ml-10 min-[1600px]:ml-40! px-4 py-4 md:pb-4 border
                    bg-slate-100 dark:bg-slate-800 creme:bg-creme-dark-light
                    border-slate-300 dark:border-slate-700 creme:border-creme-dark">
            <span class="text-2xl font-bold text-red-600">Danger Zone</span>

            <div class="pt-3">
                <span class="text-lg font-bold">Delete Account</span>
            </div>
            <div class="flex justify-between text-slate-600 dark:text-slate-400 creme:text-stone-500">
                <div class="w-5/6">
                    <span>Delete your account and data</span>
                </div>
                <div class="pr-0 md:pr-6">
                    <a href="{% url 'profile-delete' %}" class="text-red-600! hover:underline">
                        Delete
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
